<template>
  <div class="comment-list">
    <van-list
      v-model="loading"
      :finished="finished"
      offset="50"
      error-text="获取评论数据失败"
      :error="error"
      finished-text="没有更多了评论"
      @load="loadCommentList"
    >
      <van-cell v-for="(item, index) in commentList" :key="index">
        <CommentItem :comment="item" />
        <!-- <div>{{item}}</div> -->
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getCommentAjax } from "@/api/comment";
// 每一项评论的 全部信息
import CommentItem from "./comment-item";

export default {
  name: "CommentList",
  components: {
    CommentItem
  },
  props: {
    source: {
      type: [Number, String, Object],
      required: true
    },
    commentList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },

  data() {
    return {
      type: "a",
      offset: null,
      loading: false,
      finished: false,
      error: false
    };
  },
  created() {},
  methods: {
      // 如果一个请求有翻页的操作，
    // 一般的参数 page 当前页码值 perpage 每页显示的数量
    // 我们这里是 offset 类似于时间戳， 用这个变量表示当前的页码
    // limit 每页限制你显示的数量，不传就有后端的默认值
    async loadCommentList() {
      try {
        // get请求的时候， axios会默认的把我们的参数转换为字符串，碰到了biging数据的时机，转换为字符串就添加了双引号
        // 我们要不让他帮我们转换，我们自己吧所有的数字手动转换为字符串
        const { data } = await getCommentAjax({
          type: this.type, //评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          // source: this.source, // 源id，文章id或评论id
          source: this.source.toString(),
          offset: this.offset, //表示从此id的数据向后取 类似榆翻页的页码
          limit: 10
        })

        this.$emit('COMMENT_COUNT_EVENT', data.data.total_count)

        // push函数 接受的是多个参数，不能以数组的形式 传递；应该用参数序列的方式
        // ...[1,2,3,4,5]  ===>   1,2,3,4,5
        this.commentList.push(...data.data.results)

        // 加载状态结束
        this.loading = false

        // 判断所有数据是否加载完毕
        if (data.data.results.length == 0) {
          this.finished = true
        } else {
          // 这里是数据还没有加载完毕，以前的操作是 this.page++
          this.offset = data.data.last_id
        }
      } catch (err) {
        this.error = true
        this.loading = false
      }
    },

  }
};
</script>

<style lang="less" scoped></style>
